import React, {Component} from 'react';

require('./css/frame.css');

export default class P13 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      index: [1, 0],
      flag: ['block','block','block','block']
    };
  }

  onSlider(i) {
    let index = [0, 0];
    index[i] = 1;
    this.setState({
      index
    });
  }

  onClick(i) {
    let { flag} = this.state;
    flag[i] = 'block';
    this.setState({
      flag
    });
  }

  render() {
    const {index, flag} = this.state;
    return (
      <div id="page">
        <div className="content" id="box13">
          <h4 className="title">舒适系统-紧凑型后视摄像头 </h4>
          {index[0] === 1 && <div className='box13Cont' id='box130'>
            <div className='infodiv'>探岳 TAYRON最大的更新为舒适后视摄像头，集成在控制器中，用于摄像头中的图片处理。<br></br>
              以紧凑型后视摄像头为例，其工作原理如下图示。
            </div>
            <img src={require('./img/13_0.png')} style={{marginTop: 60, marginLeft: 40}}/>
            <p style={{left:460,top:120}}>车辆信息通过CAN-总线</p>
            <ul  style={{left:770,top:280}}>
              <li>图像处理集成控制器</li>
            <li>静态以及动态辅助线</li>
            <li>图像插入用于纵向以及横向停车</li>
            <li>可选拖车操纵向导</li>
            </ul>
            <p  style={{left:500,top:450}}>图像传输通过FBAS线
            </p>

          </div>}

          {index[1] === 1 && <div className='box13Cont' id='box131'>
            <div className='infodiv'>现在，您可以分别开启紧凑型后视摄像头，查看四种不同的泊车模式的透视图计算影像。</div>
            <img src={require('./img/13_1.jpg')} style={{marginTop: 140}}/>

            <div className='box13img' style={{left: 40,top:100}}>
              <p>横向泊车</p>
              <img src={require('./img/13_2.jpg')} style={{display:flag[0]}}/>
            </div>

            <div className='box13img' style={{left: 620,top:100}}>
              <p>查看拖车</p>
              <img src={require('./img/13_3.jpg')} style={{display:flag[1]}}/>
            </div>
            <div className='box13img' style={{left: 40,top:300}}>
              <p>纵向泊车</p>
              <img src={require('./img/13_4.jpg')} style={{display:flag[2]}}/>
            </div>

            <div className='box13img' style={{left: 620,top:300}}>
              <p>角落查看(广视角)	</p>
              <img src={require('./img/13_5.jpg')} style={{display:flag[3]}}/>
            </div>

          </div>}

          <div id="csld" className="sldcir" style={{left: 440}}>
            {index.map((item, i) => {
              let sr = (item === 1 ? 'son' : 'soff');
              return (
                <img key={i} src={require('./img/' + sr + '.png')} onClick={this.onSlider.bind(this, i)}/>);
            })}
          </div>

        </div>
      </div>
    );
  }
}


